import Link from 'next/link';

export default function TailwindLearnLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <nav className="bg-gray-800 text-white p-4">
        <div className="container mx-auto flex justify-between items-center">
          <Link href="/" className="text-xl font-bold">
            ← 返回主页
          </Link>
          <h1 className="text-lg font-semibold">Tailwind CSS 学习指南</h1>
          <div></div> {/* Spacer for flex alignment */}
        </div>
      </nav>
      <main>{children}</main>
    </div>
  );
}